<template>
 <div class="home-index">
    <div style="text-align: center;">
      <img class="home-logo" src="../assets/img/logo.png" alt="">
    </div>
    <div>
      <p class="font-z1" style="text-align: center;">距离创世挖矿还差</p>
      <div class="home-distance">
        <img src="../assets/img/Z.svg" alt="">
        <div>
          <p class="font-home1">{{utils.numType(dataList.poorComputerPower)}}</p>
          <p class="font-home2">算力</p>
        </div>
      </div>
    </div>
    <!-- <div class="home-ing">
      <div class="home-back-img">
        <img src="../assets/img/Z.svg" alt="">
        <img style="position: absolute;left: 180px;top: 30px;width: 30px;height: 30px;" src="../assets/img/index-icon-mine.svg" alt="">
        <img style="position: absolute;left: 220px;top: 85px;width: 45px;height: 45px;" src="../assets/img/index-icon-mine.svg" alt="">
        <img style="position: absolute;left: 80px;top: 50px;width: 60px;height: 60px;" src="../assets/img/index-icon-mine.svg" alt="">
      </div>
      <img style="width: 80%;margin-left: 10%;" src="../assets/img/index-img-word.svg" alt="">
    </div> -->
    <!-- <div class="home-ing">
      <p style="margin-bottom: 10px;">
        <span class="font-z2" style="margin-right: 11px;">今日收益</span>
        <span class="font-z3" @click="jump('/returnInformation')">点击查看收益信息</span>
      </p>
      <p>
        <span class="font-home1" style="margin-right: 5px;">8390.01</span>
        <span style="font-size: 18px;position: relative;top: -4px;font-family: axis;">≈367UDST</span>
      </p>      
      <div class="home-back-imgs">
        <img src="../assets/img/Z.svg" alt="">
        <div style="position: absolute;left: 26px;top: 18px;height: 30px;font-family: axis;">
          <img style="height: 30px;margin-bottom: 4px;" src="../assets/img/index-icon-mine.svg" alt="">
          <div>0.0001G</div>
        </div>
        <div style="position: absolute;left: 85px;top: -34px;height: 30px;font-family: axis;">
          <img style="height: 35px;margin-bottom: 4px;" src="../assets/img/index-icon-mine.svg" alt="">
          <div>0.0001G</div>
        </div>
        <div style="position: absolute;left: 105px;top: 24px;height: 30px;font-family: axis;">
          <img style="height: 50px;margin-bottom: 4px;" src="../assets/img/index-icon-mine.svg" alt="">
          <div>0.0001G</div>
        </div>
        <div style="position: absolute;left: 203px;top: -26px;height: 30px;font-family: axis;">
          <img style="height: 40px;margin-bottom: 4px;" src="../assets/img/index-icon-mine.svg" alt="">
          <div>0.0001G</div>
        </div>
        <div style="position: absolute;left: 185px;top: 58px;height: 30px;font-family: axis;">
          <img style="height: 55px;margin-bottom: 4px;" src="../assets/img/index-icon-mine.svg" alt="">
          <div>0.0001G</div>
        </div>
        <div style="position: absolute;left: 265px;top: 14px;height: 30px;font-family: axis;">
          <img style="height: 38px;margin-bottom: 4px;" src="../assets/img/index-icon-mine.svg" alt="">
          <div>0.0001G</div>
        </div>
      </div>
      <div class="home-back-img">
        <img src="../assets/img/Z.svg" alt="">
        <img src="../assets/img/index-img-mine.svg" alt="">
        <p>正在挖矿</p>
      </div>
    </div> -->
    <div class="home-kuang">
      <p class="font-z1">
        <span>当前全网总算力</span>
        <span style="font-family: axis;">{{utils.numType(dataList.allComputerPower)}}</span>
        <img @click="showRuleDetail = true" src="../assets/img/index-icon-doubt.svg" style="float: right;margin-top: 3px;" alt="">
        <span class="font-z4" style="float: right;margin-top: 2px;margin-right: 3px;" @click="showRuleDetail = true">规则</span>
      </p>
      <div style="position: relative;">
        <p class="home-back-btn">
          <span class="font-z2" style="margin-right: 7px;">我的算力</span>
          <span class="font-z5" style="position: relative;top: 2px;font-family: axis;">{{utils.numType(dataList.myComputerPower)}}</span>
        </p>
        <div style="position: absolute;top: 0px;right: 0px;" v-if="dataList.special">
          <img style="position: absolute;right: 10px;right: 110px;top: 10px;" src="../assets/img/index-icon-discount.svg" alt="">
          <button class="home-btn" @click="miningCli">
            购买创世算力
          </button>
        </div>
        <div style="position: absolute;top: 0px;right: 0px;" v-else>
          <img src="../assets/img/index-icon-flash.svg" style="position: absolute;right: 10px;right: 85px;top: 16px;">
          <button class="home-btn" style="padding-right: 12px;width: 118px;" @click="miningCli">
            立即挖矿
          </button>
        </div>
      </div>
    </div>
    <p class="font-home3">动态</p>
    <van-list v-model="loading" style="padding-bottom: 88px;" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul class="home-list">
        <li v-for="(val,index) in listData" @click="dynamicCli(index)">
          <img v-if="val.images" :src="val.images" alt="">
          <div>
            <p class="home-list-text">
              {{val.introduction}}
            </p>
            <div style="width: 72%;margin-top :17px;display: inline-block;float: right;">
              <!-- <div style="display: inline-block;height: 20px;line-height: 20px;">
                <img style="width: 20px;height: 20px;" src="../assets/img/Controls@3x.png" alt="">
                <span style="margin-left: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">deseen.com</span>
              </div> -->
              <div style="display: inline-block;float: right;height: 20px;line-height: 20px;">
                <!-- <img style="width: 20px;height: 20px;" src="../assets/img/index-icon-comment@3x.png" alt=""> -->
                <span style="margin-left: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{val.createTime}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </van-list>
    <div class="home-rule" v-show="showRuleDetail">
      <div class="home-rule-box">
        <div style="text-align: center;font-size: 18px;margin-bottom: 20px;font-weight: bold;">规则详情</div>
        <div class="home-font-bottom">1.创世挖矿阶段，全网总算力达到3150万，开始创世挖矿产币</div>
        <div class="home-font-bottom">2.创世阶段认购矿机，减免79U矿机维护费用，创世结束后采购矿机收取79U/台/3年</div>
        <div class="home-font-bottom">3.创世成功后，每天产出720枚，每两小时领取的挖矿收益为（我的算力/全网总算力）*60枚</div>
      </div>
      <img @click="showRuleDetail = false" style="margin-top: 20px;" src="../assets/img/layer-close.svg" alt="">
    </div>
    <div class="home-dynamic-fixed" v-if="showDynamic">
      <img @click="returndyn" style="position: absolute;left: 0px;top: 0px;z-index: 10;" src="../assets/img/return-left.svg" alt="">
      <div v-if="dynamic.images" style="background-image: linear-gradient(to top,rgba(17, 18, 20, 0),rgba(17, 18, 20, 1));height: 255px;">
        <!-- <div style="position: fixed;top: 1px;"></div> -->
        <img style="width: 100%;height: 255px;" :src="dynamic.images" alt="">
        <div style="width: 100%;height: 255px;background-image: linear-gradient(to bottom,rgba(17, 18, 20, 0),rgba(17, 18, 20, 1));position: absolute;top: 0px;">
          <div style="position: absolute;bottom: 50px;left: 15px;font-size: 24px;">{{dynamic.title}}</div>
        </div>
      </div>
      <div style="padding: 20px 15px;color: rgba(255, 255, 255, .5);line-height: 1.5;" v-html="dynamic.detail"></div>
    </div>
 </div>
</template>

<script>
  import { Toast,List } from 'vant';
export default {
  name: 'home',
  data () {
    return {
      showRuleDetail:false,
      dataList:{
        allComputerPower: 0,
        myComputerPower: 0,
        poorComputerPower: 0,
        special: true,
      },
      listData:[],
      loading: false,
      finished: false,
      num: 0,
      total: 0,
      dynamic:{},
      showDynamic:false,
      exchangePwd:'',
      cardState:''
    }
  },
  components:{
    [List.name]:List
  },
  mounted() {
    this.initData();
  },
  methods:{
    miningCli(){
      if(this.exchangePwd == null){
        Toast('请先设置交易密码！')
        this.$router.push('/safetyCenter');
        return
      }
      if(this.cardState == 1){
        Toast('请先实名认证！')
        this.$router.push('/safetyCenter');
        return
      }
      this.$router.push('/buyHash');
    },
    initData(){
      this.$http.get(this.utils.config+'/gz/member/computer_power_detail').then((data)=>{
         this.dataList = data.data.data;
      })    
      this.$http.get(this.utils.config+"/gz/member/person_center").then((data)=>{
        if(data.data.success){
          this.cardState = data.data.data.cardState;
          this.exchangePwd = data.data.data.exchangePwd;
          console.log(this.exchangePwd == null)
        }
      })  
    },
    onLoad(){
      var that = this;
      that.num++;
      that.$http.get(that.utils.config+'/gz/pub/dynamics?currentPage='+this.num+'&pageSize=10').then((data)=>{
        that.total = data.data.totalSize;
        for (let i = 0; i < data.data.data.length; i++) {
            that.listData.push(data.data.data[i]);
            that.loading = false;
        }
        if (that.total == that.listData.length) {
            that.finished = true;
        }
      })
    },
    dynamicCli(num){      
      this.$http.get(this.utils.config+'/gz/pub/dynamics_detail/'+this.listData[num].id).then((data)=>{
        this.dynamic = data.data.data;
        this.showDynamic = true;
      })
    },
    returndyn(){
      window.noBack = false;
      this.showDynamic = false;
    },
    jump(str){
      this.$router.push(str);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .home-index{
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: #111214;
    padding: 0px 15px;
    color:#fff;
    .home-rule{
      position: fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100vh;
      text-align:center;
      z-index:10;
      background-color: rgba(0,0,0,.4);
      padding: 220px 30px 0px 30px;
    }
    .home-font-bottom{
      font-size: 13px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.5;
    }
    .home-rule-box{
      width: 100%;
      height: 270px;
      background-color: #2F3036;
      border-radius: 5px;
      text-align: left;
      padding: 26px 21px 22px 21px;
    }
    .home-list{
      position: relative;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      li{
        width: 100%;
        height: 120px;
        border-radius: 5px;
        position: relative;
        margin-bottom: 10px;
      }
      li>img{
        width: 100%;
        height: 120px;
        position: absolute;
        top: 0px;
        border-radius: 5px;
      }
      li>div:nth-child(2){
        border-radius: 5px;
        position: absolute;
        padding: 9px 11px 10px 34px;
        top:0px;
        width: 100%;
        height: 120px;
        background-image: linear-gradient(to right,rgba(0,0,0,0) 10%,#1E1F24 34%,#1E1F24 100%);
      }
    }
    .font-home1{
      font-family: axis;
      font-size: 36px;
      font-weight: bold;
      text-decoration: underline;
      color: #fff;
      margin-bottom: 3px;
    }
    .font-home2{
      font-size: 20px;
      font-weight: 500;
      color: #fff;
    }
    .font-home3{
      font-size: 20px;
      font-weight: 500;
      margin-top: 30px;
      margin-bottom: 22px;
    }
    .home-logo{
      width: 120px;
      height: 32px;
      margin-top: 12px;
      margin-bottom: 42px;
    }
    .home-distance{
      position: relative;
      width: 100%;
      height: 88px;
      margin-top: 4px;
      >div{
        position: absolute;
        width: 100%;
        top: 6px;
        text-align:center;
      }
      img{
        width: 100%;
        height: 88px;
      }
    }
    .home-ing{
      margin-top: 22px;
    }
    .home-back-imgs{
      width: 100%;
      height: 170px;
      margin-top:39px;
      position: relative;
      text-align: center;
    }
    .home-back-img{
      width: 100%;
      height: 170px;
      margin-top:39px;
      position: relative;
      img:nth-child(1){
        width:100%;
        height: 88px;
        position: absolute;
        top:40px;
      }
      img:nth-child(2){
        width: 100%;
        height: 170px;
        position: absolute;
        top:0px;
      }
      p:nth-child(3){
        text-align: center;
        padding-top: 154px;
        font-size: 18px;
        font-weight: 500;
      }
    }
    .home-kuang{
      margin-top: 45px;
    }
    .home-back-btn{
      width: 100%;
      height: 56px;
      line-height: 56px;
      margin-top: 20px;
      padding-left: 17px;
      background-color: #1E1F24;
      border-radius: 5px;
    }
    .home-btn{
      width: 148px;
      height: 56px;
      line-height: 56px;
      background-color: #6E59FF;
      border:none;
      border-radius: 5px;
      font-size: 16px;
      font-weight: 500;
      text-align: right;
    }
  }
  .home-list-text{
    width: 72%;
    height: 63px;
    display: -webkit-box;
    float: right;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-height: 1.3;
    -webkit-box-orient: vertical;
  }
  .home-dynamic-fixed{
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: auto;
    padding-bottom: 72px;
    top: 0px;
    left: 0px;
    background-color: #111214;
  }
</style>
